

<!DOCTYPE html>
<html lang="zh" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head><meta name="generator" content="Hexo 3.9.0">
    <title>常用javascript方法整理之数字千分位格式化 - suke`s Notice</title>
<meta charset="utf-8">
<meta name="X-UA-Compatible" content="IE=edge">
<meta name="author" content="suke">
<meta name="description" content="场景1&amp;gt; 使用千分位格式化金额，更正式的显示

效果
思路1231.分割整数位和小数位，处理小数位补零，或者...">
<meta name="keywords" content="javascript html css php server npm nodejs">

<link rel="alternate" type="application/atom+xml" title="ATOM 1.0" href="/atom.xml">

    <meta charset="utf-8">
    <meta name="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="telephone=no" name="format-detection">
    <meta name="renderer" content="webkit">
    <meta name="theme-color" content="#ffffff">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" crossorigin="anonymous">
<link rel="stylesheet" href="/css/journal.css?7520808">

<script src="/js/loadCSS.js"></script>
<script>
    loadCSS("https://fonts.googleapis.com/css?family=Lora|Montserrat|Fira+Mono|Material+Icons");
    (function (d) {
        var config = {
                kitId: 'dwg1tuc',
                scriptTimeout: 3000,
                async: true
            },
            h = d.documentElement, t = setTimeout(function () {
                h.className = h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive";
            }, config.scriptTimeout), tk = d.createElement("script"), f = false,
            s = d.getElementsByTagName("script")[0], a;
        h.className += " wf-loading";
        tk.src = 'https://use.typekit.net/' + config.kitId + '.js';
        tk.async = true;
        tk.onload = tk.onreadystatechange = function () {
            a = this.readyState;
            if (f || a && a != "complete" && a != "loaded") return;
            f = true;
            clearTimeout(t);
            try {
                Typekit.load(config)
            } catch (e) {
            }
        };
        s.parentNode.insertBefore(tk, s)
    })(document);
</script>
<noscript>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora|Montserrat|Anonymous+Pro:400|Material+Icons">
</noscript>
</head>
<body>
<div id="top"></div>
<div id="app">
<div class="single-column-drawer-container" ref="drawer" v-bind:class="{ 'single-column-drawer-container-active': isDrawerOpen }">
    <div class="drawer-content">
        <div class="drawer-menu">
            <a class="a-block drawer-menu-item false" href="https://sukeai.netlify.com">
                Home
            </a>
            

            
            
            <a class="a-block drawer-menu-item false" href="/firends/index.html">
                朋友👬
            </a>
            
            <a class="a-block drawer-menu-item false" href="/projects/index.html">
                空闲下来做的项目
            </a>
            
            <a class="a-block drawer-menu-item false" href="/about/index.html">
                关于我
            </a>
            

            
            <a class="a-block drawer-menu-item" href="/atom.xml">
                RSS
            </a>
            
        </div>
    </div>
</div>
<transition name="fade">
    <div v-bind:class="{ 'single-column-drawer-mask': mounted }" v-if="isDrawerOpen" v-on:click="toggleDrawer"></div>
</transition>
<nav ref="navBar" class="navbar sticky-top navbar-light single-column-nav-container">
    <div ref="navBackground" class="nav-background"></div>
    <div class="container container-narrow nav-content">
        <button id="nav_dropdown_btn" class="nav-dropdown-toggle" type="button" v-on:click="toggleDrawer">
            <i class="material-icons">
                menu
            </i>
        </button>
        <a ref="navTitle" class="navbar-brand" href="/">
            suke`s Notice
        </a>
    </div>
</nav>
<div class="single-column-header-container" ref="pageHead" v-bind:style="{ transform: 'translateZ(0px) translateY('+.3*scrollY+'px)', opacity: 1-navOpacity }">
    <a href="/">
        <div class="single-column-header-title">suke`s Notice</div>
        <div class="single-column-header-subtitle">hexo博客</div>
    </a>
</div>
<div ref="sideContainer" class="side-container">
    <a class="a-block nav-head false" href="/">
        <div class="nav-title">
            有猫病.
        </div>
        <div class="nav-subtitle">
             她的眼里有光,她爱的人是谁呢 
        </div>
    </a>

    <div class="nav-link-list">
        

        
        
        <a class="a-block nav-link-item false" href="/firends/index.html">
            朋友👬
        </a>
        
        <a class="a-block nav-link-item false" href="/projects/index.html">
            空闲下来做的项目
        </a>
        
        <a class="a-block nav-link-item false" href="/about/index.html">
            关于我
        </a>
        

        
        <a class="a-block no-tint nav-link-item" href="/atom.xml">
            RSS
        </a>
        
    </div>

    
    <div class="nav-footer">
        Proudly published with Hexo<br>
        
        Theme <a href="https://github.com/SumiMakito/hexo-theme-journal/" target="_blank" rel="noreferrer noopener">Journal.</a> by <a href="https://mak1t0.cc/" target="_blank" rel="noreferrer noopener">Makito</a><br>
        
        &copy; 2020 <a href="https://sukeai.netlify.com">suke`s Notice</a>
    </div>
</div>
<div ref="extraContainer" class="extra-container">
    <div class="pagination">
        <a id="globalBackToTop" class="pagination-action animated-visibility" href="#top" :class="{ invisible: scrollY == 0 }">
            <i class="material-icons pagination-action-icon">
                keyboard_arrow_up
            </i>
        </a>

        
    </div>
</div>



<div ref="streamContainer" class="stream-container">
    <div class="post-list-container post-list-container-shadow">
        <div class="post">
            <div class="post-head-wrapper-text-only" style="background-image: url('')">
                <div class="post-title">
                    常用javascript方法整理之数字千分位格式化
                    <div class="post-meta">
                        <time datetime="2019-08-20T16:21:57.000Z" itemprop="datePublished">
                            2019-08-20 16:21
                        </time>&nbsp;
                        
    
                        
                    </div>
                </div>
            </div>
    
            <div class="post-body-wrapper">
                <div class="post-body">
                    <h2 id="场景"><a href="#场景" class="headerlink" title="场景"></a>场景</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="quote">&gt; 使用千分位格式化金额，更正式的显示</span></span><br></pre></td></tr></table></figure>

<h2 id="效果"><a href="#效果" class="headerlink" title="效果"></a>效果</h2><p><img src="https://i.loli.net/2019/08/21/z9wpms86QhHSbFr.png" alt></p>
<h2 id="思路"><a href="#思路" class="headerlink" title="思路"></a>思路</h2><figure class="highlight angelscript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>分割整数位和小数位，处理小数位补零，或者四舍五入</span><br><span class="line"><span class="number">2.</span>获取整数位的长度 按<span class="number">3</span>分割 插入 , 号</span><br><span class="line"><span class="number">3.</span>拼接字符串 组合返回值</span><br></pre></td></tr></table></figure>

<h2 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">    </span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 金额类数字格式化 千分位 小数点</span></span><br><span class="line"><span class="comment"> * @param &#123;*&#125; num   传入的数字</span></span><br><span class="line"><span class="comment"> * @param &#123;*&#125; f 	保留的小数位数</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">const</span> moneyFormat = <span class="function">(<span class="params">num, f</span>) =&gt;</span> &#123;</span><br><span class="line">	num = <span class="built_in">String</span>(num) <span class="comment">//转化为字符串</span></span><br><span class="line"></span><br><span class="line">	<span class="keyword">let</span> Old_f = <span class="literal">null</span></span><br><span class="line">	<span class="keyword">if</span> (num.search(<span class="regexp">/\./</span>) &gt; <span class="number">-1</span>) &#123;</span><br><span class="line">		Old_f = num.toString().split(<span class="string">"."</span>)[<span class="number">1</span>].length <span class="comment">//原始小数的位数</span></span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span> (Old_f &amp;&amp; Old_f !== <span class="string">'null'</span> &amp;&amp; Old_f &lt; f) &#123; <span class="comment">//如果比目标位数小则补 “0”</span></span><br><span class="line">		<span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; (f - Old_f); i++) &#123;</span><br><span class="line">			num += <span class="string">'0'</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	num = <span class="built_in">Math</span>.floor(<span class="built_in">Number</span>(num).toFixed(f) * (<span class="built_in">Math</span>.pow(<span class="number">10</span>, f))) + <span class="string">""</span> <span class="comment">//tofixxed到值定位数后 转换成整数</span></span><br><span class="line"></span><br><span class="line">	<span class="keyword">let</span> integer = num.slice(<span class="number">0</span>, num.length - f) + <span class="string">""</span> <span class="comment">//取转换后到字符串整数部分</span></span><br><span class="line">	<span class="keyword">let</span> decimal = num.slice(num.length - f, num.length) + <span class="string">""</span> <span class="comment">//小数部分</span></span><br><span class="line"></span><br><span class="line">	<span class="keyword">let</span> thou = <span class="built_in">Math</span>.floor(integer.length / <span class="number">3</span>) <span class="comment">//thousandCentimeter 取千分位到个数</span></span><br><span class="line">	<span class="keyword">if</span> (integer.length % <span class="number">3</span> == <span class="number">0</span>) &#123;</span><br><span class="line">		thou = thou - <span class="number">1</span> <span class="comment">//如果完美整除则少一次循环</span></span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">let</span> new_integer = <span class="string">''</span> <span class="comment">//新的整数位</span></span><br><span class="line">	<span class="keyword">let</span> temp = <span class="number">0</span> <span class="comment">//临时坐标</span></span><br><span class="line">	<span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; thou + <span class="number">1</span>; i++) &#123;</span><br><span class="line">		<span class="keyword">let</span> target = integer.length - (thou - i) * <span class="number">3</span> <span class="comment">//thou-1 按照 54321 这样做循环 获取分号的坐标</span></span><br><span class="line">		new_integer += integer.slice(temp, target) <span class="comment">//拼接字符串</span></span><br><span class="line">		<span class="keyword">if</span> (i !== thou) &#123;</span><br><span class="line">			new_integer += <span class="string">','</span> <span class="comment">//过滤最后一个</span></span><br><span class="line">		&#125;</span><br><span class="line">		temp = target</span><br><span class="line">	&#125;</span><br><span class="line">	integer = new_integer</span><br><span class="line"></span><br><span class="line">	<span class="keyword">return</span> &#123;</span><br><span class="line">		full: integer + <span class="string">'.'</span> + decimal, <span class="comment">//自动拼接字符串</span></span><br><span class="line">		arr: [integer, decimal] <span class="comment">//分别返回 整数部分 和 小数部分 用于自定义样式</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


                </div>
            </div>
    
            <nav class="post-pagination">
    
    <a class="newer-posts" href="/2019-08-23/javascript时间戳转指定格式.html">
        Previous post<br>javascript时间戳转指定格式 ⌚️
    </a>
    
    <span class="page-number"></span>
    
    <a class="older-posts" href="/1997-01-01/hello-world.html">
        Next post<br>测试文章-自动部署测试
    </a>
    
</nav>

    
            


        </div>
    </div>
    <div class="single-column-footer">
    Proudly published with Hexo<br>
    
    Theme <a href="https://github.com/SumiMakito/hexo-theme-journal/" target="_blank" rel="noreferrer noopener">Journal.</a> by <a href="https://mak1t0.cc/" target="_blank" rel="noreferrer noopener">Makito</a><br>
    
    &copy; 2020 <a href="https://sukeai.netlify.com">suke`s Notice</a>
</div>
</div>

</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.4/dist/umd/popper.min.js" integrity="sha256-EGs9T1xMHdvM1geM8jPpoo8EZ1V1VRsmcJz8OByENLA=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha256-VsEqElsCHSGmnmHXGQzvoWjWwoznFSZc6hs7ARLRacQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js" integrity="sha256-FtWfRI+thWlNz2sB3SJbwKx5PgMyKIVgwHCTwa3biXc=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/smooth-scroll@14.2.1/dist/smooth-scroll.polyfills.min.js" integrity="sha256-CI4Gq5E0io1Pv0xM3qPM+NUIOhbIBvC3GiN1Y4KhXpw=" crossorigin="anonymous"></script>
<script src="/js/journal.js?16757808"></script>



</body>
</html>
